"use client";

import { LogOut, Menu, User } from "lucide-react";
import Link from "next/link";
import { useRouter } from "next/navigation";
import { useState } from "react";

import { ModeToggle } from "@/components/theme-toggle";
import { useAuth } from "@/contexts/auth-context";
import { logout } from "@/lib/session";

const navItems = [
  { href: "/dashboard", label: "仪表盘" },
  { href: "/schedule", label: "排产" },
  { href: "/outputs/new", label: "日报上报" },
  { href: "/reports", label: "报表" },
];

export function SiteHeader() {
  const { isAuthenticated, user, signOut } = useAuth();
  const [isMenuOpen, setIsMenuOpen] = useState(false);
  const router = useRouter();

  const handleLogout = async () => {
    await logout();
    signOut();
    router.replace("/auth/login");
  };

  const handleMenuLogout = async () => {
    await handleLogout();
    setIsMenuOpen(false);
  };

  return (
    <header className="border-b border-border bg-background/60 backdrop-blur">
      <div className="mx-auto flex h-14 w-full max-w-6xl items-center justify-between gap-4 px-4">
        <div className="flex items-center gap-3">
          <button
            type="button"
            className="inline-flex items-center rounded-md p-2 text-muted-foreground hover:bg-accent/60 hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring sm:hidden"
            onClick={() => setIsMenuOpen((prev) => !prev)}
            aria-label="Toggle navigation"
          >
            <Menu className="h-5 w-5" />
          </button>
          <Link href="/" className="text-sm font-semibold tracking-wide text-primary">
            Business Overview
          </Link>
          <nav className="hidden items-center gap-3 text-sm text-muted-foreground sm:flex">
            {navItems.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className="rounded-md px-3 py-1.5 transition hover:bg-accent hover:text-foreground"
              >
                {item.label}
              </Link>
            ))}
          </nav>
        </div>
        <div className="flex items-center gap-2">
          <ModeToggle />
          {isAuthenticated ? (
            <div className="flex items-center gap-2 text-sm">
              <span className="hidden items-center gap-1 rounded-md border border-border px-2 py-1 text-muted-foreground sm:inline-flex">
                <User className="h-4 w-4" />
                {user?.displayName ?? "未命名"}
              </span>
              <button
                type="button"
                onClick={handleLogout}
                className="inline-flex items-center gap-1 rounded-md border border-border px-3 py-1.5 text-xs font-medium text-muted-foreground transition hover:bg-destructive hover:text-destructive-foreground"
              >
                <LogOut className="h-4 w-4" />
                退出
              </button>
            </div>
          ) : (
            <Link
              href="/auth/login"
              className="inline-flex items-center rounded-md border border-border px-3 py-1.5 text-xs font-medium transition hover:bg-primary hover:text-primary-foreground"
            >
              登录
            </Link>
          )}
        </div>
      </div>
      {isMenuOpen ? (
        <nav className="border-t border-border bg-background px-4 py-3 text-sm text-muted-foreground shadow-sm sm:hidden">
          <div className="flex flex-col gap-2">
            {navItems.map((item) => (
              <Link
                key={item.href}
                href={item.href}
                className="rounded-md px-3 py-2 transition hover:bg-accent hover:text-foreground"
                onClick={() => setIsMenuOpen(false)}
              >
                {item.label}
              </Link>
            ))}
            {isAuthenticated ? (
              <button
                type="button"
                onClick={handleMenuLogout}
                className="inline-flex items-center gap-1 rounded-md border border-border px-3 py-2 text-left transition hover:bg-destructive hover:text-destructive-foreground"
              >
                <LogOut className="h-4 w-4" />
                退出登录
              </button>
            ) : (
              <Link
                href="/auth/login"
                onClick={() => setIsMenuOpen(false)}
                className="rounded-md border border-border px-3 py-2 transition hover:bg-primary hover:text-primary-foreground"
              >
                登录
              </Link>
            )}
          </div>
        </nav>
      ) : null}
    </header>
  );
}
